<template>
  <el-form :disabled="disabled" :model="formData" class="demo-form-inline" ref="editFrom" :v-bind="$attrs" v-on="$listeners" :rules="rules" label-position="left" label-width="80px">
    <el-form-item :prop="item.prop" v-for="(item,key) in formFields" :label="item.label" :key="key" :rules="item.rules">
      <template v-if="item.type == 'input'">
        <my-input v-model="formData[item.prop]" :maxlength="item.max?item.max:20"></my-input>
      </template>
      <template v-else-if="item.type == 'select'">
        <my-select v-model="formData[item.prop]" :options="item.options" :dict="item.dict" :url="item.url"></my-select>
      </template>
      <template v-else-if="item.type == 'date'">
        <my-date v-model="formData[item.prop]"></my-date>
      </template>
      <template v-else-if="item.type == 'rate'">
        <my-rate style="margin-top: 10px" v-model="formData[item.prop]"></my-rate>
      </template>
      <template v-else-if="item.type == 'tree'">
        <my-tree v-model="formData[item.prop]" :url="item.url"></my-tree>
      </template>
      <template v-else-if="item.type == 'switch'">
        <my-switch v-model="formData[item.prop]"></my-switch>
      </template>
      <template v-else-if="item.type == 'number'">
        <my-input-number v-model="formData[item.prop]"></my-input-number>
      </template>
      <template v-else-if="item.type == 'radio'">
        <my-radio v-model="formData[item.prop]" :options="item.options" :dict="item.dict" :url="item.url"></my-radio>
      </template>
      <template v-else-if="item.type == 'cascader'">
        <my-cascader v-model="formData[item.prop]" :options="item.options" :url="item.url"></my-cascader>
      </template>
      <template v-else-if="item.type == 'checkbox'">
        <my-checkbox-group v-model="formData[item.prop]" :options="item.options" :dict="item.dict" :url="item.url"></my-checkbox-group>
      </template>
      <template v-else-if="item.type == 'time'">
        <my-time-picker v-model="formData[item.prop]"></my-time-picker>
      </template>
      <template v-else-if="item.type == 'upload'">
        <my-upload v-model="formData[item.prop]" ref="upload" :name="item.prop" :accept="item.accept?item.accept:''" @upload="uploadStart" @done="uploadSuccess"></my-upload>
      </template>
      <template v-else-if="item.type == 'textarea'">
        <my-textarea v-model="formData[item.prop]" :maxlength="item.max?item.max:255"></my-textarea>
      </template>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    /** 编辑表单,根据传入参数自动生成表单 **/
    name: "my-edit-form",
    props: {
      /** 表单字段 **/
      formFields: {
        type: Array,
        default: ()=>{
          return [];
        }
      },
      /** 表单整体验证规则,也可以在formFields中的每一条添加rules来单独添加验证规则 **/
      rules: {
        type: Object,
        default: ()=>{
          return {}
        }
      },
      /** 编辑时传的实体类 **/
      data:{
        type: Object,
        default: ()=>{
          return {}
        }
      },
      /** 是否禁用 **/
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {
        formData:{},
        count: 0  //上传计数，为0则无进行中上传任务
      }
    },
    methods:{
      /** 表单验证方法,回传表单数据 **/
      validate(callback){
        /** 组件设置:auto-upload="false"时,需要手动调用submit上传 **/
        // if(this.$refs.upload){
        //   for(let item of this.$refs.upload){
        //     item.submit();
        //   }
        // }
        this.$refs.editFrom.validate((valid) => {
          if (valid) {
            let obj = this.formData;
            callback(obj)
          } else {
            callback(valid)
          }
        });
      },
      /** 当有上传组件时，需确认上传结束，故监听上传事件 **/
      uploadSuccess(){
        this.count -= 1;
        if(this.count == 0){
          this.$emit('success')
        }
      },
      /** 当有上传组件时，需确认上传结束，故监听上传事件 **/
      uploadStart(){
        this.count += 1;
        this.$emit('upload')
      }
    },
    created() {
      /** 表单赋值 **/
      let obj = {};
      for(let key in this.data){
        obj[key] = this.data[key]
      }
      this.formData = obj
    }
  }
</script>

<style scoped>

</style>
